<template>
  <div class=""
       style="width; 100%;backgroundColor: #fff;padding: 20px;"
       v-init-screen-h="1">
    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline"
             size="small">
      <el-form-item label="制造单元">
        <el-select size="mini"
                   v-model="formInline.manufactureSite"
                   @change="manuChange"
                   placeholder="请选择"
                   clearable
                   filterable
                   class="dark_input">
          <el-option v-for="item in manufactureSiteList"
                     :key="item.name"
                     :label="item.name"
                     :name="item.name"
                     :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备">
        <el-select v-model="formInline.deviceTokenList"
                   multiple
                   collapse-tags
                   size="small"
                   class="w100"
                   placeholder="请选择"
                   clearable
                   filterable>
          <el-option v-for="item in deviceData"
                     :key="item.token"
                     :label="item.name"
                     :value="item.token" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker v-model="formInline.value"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '12:00:00']">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="searchInfo">查询</el-button>
        <el-button @click="resetInfo">重置</el-button>
        <el-button type="success"
                   @click="updataInfo">刷新</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tabData.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
              border
              stripe
              size="small">
      <el-table-column type="index"
                       label="序号"> </el-table-column>
      <!-- <el-table-column prop="manufactureSite"
                       label="制造单元"> </el-table-column> -->
      <el-table-column prop="deviceToken"
                       label="设备编号"> </el-table-column>
      <el-table-column prop="deviceName"
                       label="设备名称"> </el-table-column>
      <el-table-column prop="startTime"
                       label="开始时间">
        <template slot-scope="scope">
          {{ scope.row.startTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime"
                       label="结束时间">
        <template slot-scope="scope">
          {{ scope.row.endTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column prop="electricKwh"
                       label="耗电量(Kw·h)"> </el-table-column>
      <el-table-column prop="electrovalencePrice"
                       label="电费(元)"> </el-table-column>
    </el-table>
    <Pagination @pagination="pagination"
                :total="tabData.length"
                :page.sync="pageNum"
                :limit.sync="pageSize"
                :pageSizes.sync="pageSizes" />
    <EnergyBar ref="EnergyBarRef"></EnergyBar>
  </div>
</template>

<script>
import Pagination from "@/views/common/page";
import EnergyBar from "./components/EnergyBar.vue";
import { getHarfHourList, getElectricList } from "@/api/energyManage"
import { mapGetters } from "vuex";
import { getCentralizedShops } from "@/api/centralized";
import { get4hour, currentDate3 } from "@/utils/currentDate"
export default {
  components: {
    EnergyBar,
    Pagination
  },
  computed: {
    ...mapGetters(["manufactureSiteList"])
  },
  data() {
    return {
      showSearch: false,
      formInline: {
        manufactureSite: '',
        deviceTokenList: [],
        value: []
      },
      tabData: [
      ],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pageSizes: [10, 20],
      deviceData: [],
      allDevice: []
    };
  },
  mounted() {
    this.formInline.value = []
    this.formInline.deviceTokenList = []
    this.formInline.value.push(get4hour(new Date()))
    this.formInline.value.push(currentDate3(new Date()))
    this.getDeviceList()
  },
  methods: {
    // 顶部表格部分
    //刷新用能统计数据
    updataInfo() {
      const params = {
        startTime: currentDate3(
          this.$moment(new Date())
            .subtract(24, "hour")
            .format("YYYY-MM-DD HH:mm:ss")
        ),
        endTime: currentDate3(new Date()),
        deviceTokens: this.allDevice,
        tenantToken: this.$store.state.user.tenant.token,
      }
      console.log(params)
      getHarfHourList(params).then(res => {
        console.log(res)
        this.tabData = res.data.results
        this.total = res.data.numResults
      })
    },
    // 获取列表数据
    getList() {
      const params = {
        startTime: currentDate3(this.formInline.value[0]),
        endTime: currentDate3(this.formInline.value[1]),
        deviceTokens: this.formInline.deviceTokenList
      }
      getElectricList(params).then(res => {
        console.log(res)
        this.tabData = res.data.table
        this.$refs.EnergyBarRef.setOpt(res.data.picture)
      })
    },
    searchInfo() {
      console.log(this.formInline)
      if (!this.formInline.manufactureSite && (!this.formInline.deviceTokenList || !this.formInline.deviceTokenList.length)) {
        this.$msg({
          type: "warning",
          message: "请选择设备"
        })
        return
      }
      if (!this.formInline.value || !this.formInline.value.length) {
        this.$msg({
          type: "warning",
          message: "请选择时间"
        })
        return
      }
      this.pageNum = 1
      if (this.formInline.manufactureSite && !this.formInline.deviceTokenList.length) {
        this.deviceData.forEach(res => {
          this.formInline.deviceTokenList.push(res.token)
        })
      }
      this.getList()
    },
    resetInfo() {
      this.formInline = {
        manufactureSite: '',
        deviceTokenList: [],
        value: []
      }
      this.pageNum = 1
      this.getList()
    },
    // 获取设备列表
    async getDeviceList() {
      var params = {
        manufactureSite: this.formInline.manufactureSite,
        page: 1,
        pageSize: 9999
      };
      getCentralizedShops(params).then(res => {
        const r = res.data;
        this.deviceData = r.results.map(item => {
          const obj = {
            token: item.deviceToken,
            name: item.deviceName
          };
          return obj;
        });
        if (!this.formInline.manufactureSite) {
          this.allDevice = []
          this.deviceData.forEach(res => {
            this.allDevice.push(res.token)
          })
          this.formInline.deviceTokenList = []
          this.formInline.deviceTokenList.push(this.deviceData[0].token)
          console.log(this.formInline)
          this.getList()
        }
      });
    },
    manuChange(e) {
      this.formInline.deviceTokenList = []
      this.getDeviceList()
    },
    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      // this.getList();
    },
  }
};
</script>

<style lang="scss" scoped>
.ener_box {
  /deep/ .el-card__header {
    padding: 10px;
  }
}
</style>
